<template>
  <div class="banner_col">
    <!-- headInfo -->
    <div class="headInfo">
      <div class="item">
        <div class="head">
          <p class="main-title">主标题</p>
          <p class="vice-title" @click="changeViceTitle" :class="{ active: headData.viceFlag }">
            {{ headData.viceFlag ? "关闭副标题" : "添加副标题" }}
          </p>
        </div>
        <input type="text" v-model="headData.mainTitle">
      </div>
      <div class="item" v-show="headData.viceFlag">
        <div class="head">
          <p class="main-title">副标题</p>
        </div>
        <input type="text" v-model="headData.viceTitle">
      </div>
      <div class="item">
        <p class="b10">更多跳转的URL</p>
        <input type="text" v-model="headData.moreJunpUrl">
      </div>
    </div>
    <!-- leftData -->
    <div class="leftData">
      <div class="warn-box">
        <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
        <p><span class="red">左边商品图片要求！</span><br />图片尺寸请采用316*378px</p>
      </div>
      <div class="item">
        <p class="b10">左边商品图</p>
      </div>
      <el-row :gutter="20">
        <el-col class="b10" v-for="(item, index) in leftData" :span="24" :key="index">
          <banner-form type="specialSale" :item-index="index" :form-data="item" :show-tool="true"
            @upSortItem="upSortItem(index)" @downSortItem="downSortItem(index)" @deleteItem="deleteItem(index)">
          </banner-form>
        </el-col>
      </el-row>
      <el-divider v-if="leftData.length > 0 && leftData.length < maxLenggth"></el-divider>
      <div v-if="leftData.length < maxLenggth" class="add-div banner-add-div" @click="addItem">
        <i class="el-icon-plus"></i>添加图片({{ leftData.length }}/{{ maxLenggth }})
      </div>
    </div>
    <!-- rightTopData -->
    <div class="rightTopData">
      <div class="warn-box">
        <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
        <p><span class="red">右边商品图片要求！</span><br />图片尺寸请采用314*178px</p>
      </div>
      <div class="item">
        <p class="b10">右(上)边商品图</p>
      </div>
      <div class="goods-data flex align-center flex-column">
        <crop-upload class="b10" show-type="photo" :init-val="rightTopData.img" wrapper-width="175.84px"
          wrapper-height="99.68px" :photo-width="175.84" :photo-height="99.68" :img-width="314" :img-height="178"
          @setVal="val => rightTopData.img = val" />
        <link-dialog ref="linkDialog" @setVal="getLinkData" />

        <div v-if="rightTopData.jumpType && rightTopData.jumpUrl" class="flex align-center link_val">
          <span class="type">{{ rightTopData.jumpType == 1 ? '文本链接' : '商品链接' }}</span>
          <el-tooltip v-if="type === 'bannerCol' || linkVal('rightTopData').length > 20" effect="dark"
            :content="linkVal('rightTopData')" placement="top-start">
            <p class="flex-1 text-ellipsis">{{ linkVal('rightTopData') }}</p>
          </el-tooltip>
          <p v-else class="flex-1 text-ellipsis">{{ linkVal('rightTopData') }}</p>
          <span class="color-999 pointer" @click="deleteLink('rightTopData')">
            <i class="el-icon-error"></i>
          </span>
        </div>

        <div v-else class="add-div" @click="addLink(0)">
          <i class="el-icon-link">添加链接</i>
        </div>
      </div>
    </div>
    <!-- rightBottomData -->
    <div class="rightBottomData">
      <div class="item">
        <p class="b10">右(下)边商品图</p>
      </div>
      <crop-upload class="b10 flex align-center flex-column" show-type="photo" :init-val="rightBottomData.img"
        wrapper-width="175.84px" wrapper-height="99.68px" :photo-width="175.84" :photo-height="99.68" :img-width="314"
        :img-height="178" @setVal="val => rightBottomData.img = val" />
      <link-dialog ref="linkDialog" @setVal="getLinkData" />
      <div class="goods-data flex align-center flex-column">
        <div v-if="rightBottomData.jumpType && rightBottomData.jumpUrl" class="flex align-center link_val">
          <span class="type">{{ rightBottomData.jumpType == 1 ? '文本链接' : '商品链接' }}</span>
          <el-tooltip v-if="type === 'bannerCol' || linkVal('rightBottomData').length > 20" effect="dark"
            :content="linkVal('rightBottomData')" placement="top-start">
            <p class="flex-1 text-ellipsis">{{ linkVal('rightBottomData') }}</p>
          </el-tooltip>
          <p v-else class="flex-1 text-ellipsis">{{ linkVal('rightBottomData') }}</p>
          <span class="color-999 pointer" @click="deleteLink('rightBottomData')">
            <i class="el-icon-error"></i>
          </span>
        </div>
        <div v-else class="add-div" @click="addLink(1)">
          <i class="el-icon-link">添加链接</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cropUpload from "@/components/cropUpload.vue";
import linkDialog from '../components/linkDialog.vue';
import bannerForm from "../components/bannerForm.vue";
export default {
  name: "specialSale",
  components: {
    cropUpload,
    linkDialog,
    bannerForm
  },
  data() {
    return {
      maxLenggth: 10,
      openIndex: 0,
      headData: {
        viceFlag: false,
        mainTitle: "",
        viceTitle: "",
        moreJunpUrl: "",
      },
      leftData: [],
      rightTopData: {
        img: "",
        jumpType: "",
        jumpUrl: "",
        goods: {},
      },
      rightBottomData: {
        img: "",
        jumpType: "",
        jumpUrl: "",
        goods: {},
      },
      dataTable: ["rightTopData", "rightBottomData"],
    }
  },
  computed: {
    linkVal() {
      return function (keName) {
        return this[keName].jumpType === 1 ? this[keName].jumpUrl : this[keName].goods.title
      }
    },
  },
  methods: {
    showMessage(message, type = "error") {
      return this.$message({
        message,
        type,
      })
    },
    validate() {
      /* headData */
      if (!this.headData.mainTitle) return this.showMessage("主标题不能为空");
      if (!this.headData.moreJunpUrl) return this.showMessage("更多的跳转链接不能为空");
      /* leftData */
      if (!this.leftData.length) return this.showMessage("左边图片不能为空");

      let flag = true;
      this.leftData.forEach((item, index) => {
        if (!flag) return;
        if (!item.img) {
          flag = false;
          return this.showMessage(`请在左边图片${index + 1}上传图片`)
        }
        if (!item.jumpUrl) {
          flag = false;
          return this.showMessage(`左边图片${index + 1}链接不能为空`)
        }
      })
      if (!flag) return;
      /* rightTopData */
      if (!this.rightTopData.img) return this.showMessage("右上图片不能为空");
      if (!this.rightTopData.jumpUrl) return this.showMessage("右上跳转链接不能为空");
      /* rightBottomData */
      if (!this.rightBottomData.img) return this.showMessage("右下图片不能为空");
      if (!this.rightBottomData.jumpUrl) return this.showMessage("右下跳转链接不能为空");
      return true;
    },
    getData() {
      if (!this.validate()) return false;

      const objData = {
        headData: this.headData,
        leftData: this.leftData,
        rightTopData: this.rightTopData,
        rightBottomData: this.rightBottomData,
      }
      return objData;
    },
    deleteLink(keyName) {
      this[keyName].jumpUrl = '';
      this[keyName].goods = {};
    },
    addLink(index) {
      this.openIndex = index;
      this.$refs.linkDialog.dialogVisible = true;
    },
    getLinkData({ jumpType, jumpUrl, goods }) {
      const index = this.openIndex;
      const keyName = this.dataTable[index];
      this[keyName].jumpType = jumpType;
      this[keyName].jumpUrl = jumpUrl;
      this[keyName].goods = jumpType === 2 ? goods : {};
    },
    changeViceTitle() {
      this.headData.viceFlag = !this.headData.viceFlag;
    },
    /* ---------------- */
    // 升序
    upSortItem(index) {
      if (index === 0) return;
      let item = this.leftData[index];
      this.$set(this.leftData, index, this.leftData[index - 1]);
      this.$set(this.leftData, index - 1, item);
    },
    // 降序
    downSortItem(index) {
      if (index === this.leftData.length - 1) return;

      let item = this.leftData[index];
      this.$set(this.leftData, index, this.leftData[index + 1]);
      this.$set(this.leftData, index + 1, item);
    },
    // 删除推荐位
    deleteItem(index) {
      this.leftData.splice(index, 1);
    },
    addItem() {
      this.leftData.push({
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 10px;

  .head {
    font-size: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .main-title {
      padding: 4px 0;
    }

    .vice-title {
      cursor: pointer;
      padding: 4px 10px;
      user-select: none;
      border-radius: 2px;
      color: #2993ff;
      border: 1px solid #2993ff;
      transition: all .5s;

      &.active {
        color: #e14343;
        border: 1px solid #e14343;
      }
    }
  }

  input {
    outline: 0;
    border-radius: 3px;
    width: 375px;
    height: 30px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid #eeeeee;
  }
}

.link_val {
  height: 30px;
  padding: 8px;
  border: 1px solid #eeeeee;
  margin-bottom: 15px;
  // width: 252px;
  width: 100%;

  .type {
    padding-right: 8px;
    border-right: 1px solid #eeeeee;
  }

  p {
    padding: 0 8px;
  }
}

.add-div {
  width: 252px;
}

.banner-add-div {
  margin: 0 auto 10px;
}

.warn-box {
  .red {
    color: red;
  }
}
</style>
